<template>
	<view class="padding">
		<view class="team-head-info">
			<view class="col">
				<view class="b">{{countTotal}}次</view>
				<p>累计抽奖</p>
			</view>
			<view class="col">
				<view class="b">0次</view>
				<p>普通转盘剩余次数</p>
			</view>
			<view class="col">
				<view class="b">0次</view>
				<p>集福转盘剩余次数</p>
			</view>
		</view>

		<view>
			<view class="tab-content product-details-content" style="display: block;">
				<view class="product-table product-table-xs betRecord">
					<!-- 这里放置动态生成的列表项 -->
					<!-- 示例数据，实际应根据实际情况进行循环渲染 -->
					<view class="order-item-box" v-for="(item, index) in lotteryRecords" :key="index">
						<view class="list_ct">
							<view class="top">
								<view class="name">
									<i></i>
									<text class="label">{{ item.drawNumber }}</text>
								</view>
								<view class="bet">
									<span>转盘类型：</span>
								</view>
								<view class="bet">
									<span>获得奖品：<font class="jiacu ys_tbs">{{ item.prizeName }}</font></span>
								</view>
							</view>
							<view class="bottom" style="margin: 0.4rem 0.4rem;">
								<span>抽奖时间：</span>
								<span>{{ item.drawTime }}</span>
							</view>
						</view>
					</view>
					<!-- 示例数据结束 -->

					<view class="padding ">
						<view class="fc-bet">
							<uni-navigator class="bnt-order-blue fcc" @click="prevPage">上一页</uni-navigator>
							<span><span id="c_page">{{ currentPage }}</span>/{{ totalPages }}</span>
							<uni-navigator class="bnt-order-blue fcc" @click="nextPage">下一页</uni-navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lotteryRecords: [],
				currentPage: 1,
				totalPages: 6,
				countTotal:0
			};
		},
		onLoad() {
			this.getDrawhistory()
		},
		methods: {
			getDrawhistory() {
				const user = this.$store.getters['userInfo']
				if (user == null) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				}
				const param = {
					current: this.currentPage,
					size: this.totalPages,
					userId: this.$store.state.userInfo.userId
				}
				this.$request.get('/DrawRecord/recordList', param).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.lotteryRecords = res.data.drawRecord;
                       this.countTotal=res.data.total
					}

				})
			},
			prevPage() {
				// 上一页逻辑
				if(this.currentPage>1){
					this.currentPage--
					 this.getDrawhistory()
				}
			    
			},
			nextPage() {
				// 下一页逻辑
				if(this.currentPage<this.lotteryRecords.length){
					this.currentPage++
					this.getDrawhistory()
				}
				
			},
		},
	};
</script>
<style>
	.team-head-info .col {
		width: 50%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 2.4rem;
	}

	.team-head-info {
		margin-bottom: 0.74rem;
	}

	.betRecord .list_ct {
		overflow-y: hidden;
	}

	.betRecord .list_ct .top .name>i {
		display: inline-block;
		width: 0.12rem;
		height: 1rem;
		background-color: rgb(255 112 112);
		margin-right: 0.5rem;
	}

	.betRecord .list_ct {
		margin: 0 .5rem;
	}

	.betRecord .list_ct .top {
		padding: 0.5rem;
		border-bottom: .02rem solid #e1e1e1;
	}

	.bottom {
		margin: 0 0 0.1rem 0.4rem;
		color: #757575;
		margin-top: 0.4rem;
	}
</style>